<template>
    <div class="mywork-page">
        <div class="gWidth cWidth-new">
            <div class="work-title clearfix">
                <h1 title="JavaEE大作业">{{workDTO.assignmentName}}</h1>
                <p>截至日期：{{workDTO.assignmentEnd}}</p>
                <p>个人作业</p>
            </div>
            <div id="viewer-handup">
                <div class="sc-tj-box" allowdelay="0">
                    <div class="sc-tj fl">
                        <a @click="submitUpload()" class="tj-btn" v-bind:class="{background_color: fileList.length>0}" v-if="!workDTO.isHandin">提交</a>
                        <a @click="submitUpload()" class="tj-btn" style="background-color: #32BAF0" v-else>更新提交</a>
                    </div>
                    <div class="status fr">
                        <span style="font-size: 14px" v-if="workDTO.isHandin">已完成</span>
                        <span style="font-size: 14px" v-else>未完成</span>
                    </div>
                </div>
                <div class="homework-box" v-bind:class="{handIn: fileList.length>0}">
                    <div class="sc-tj-box sc-tj-box-new" allowdelay="0">
                        <div class="sc-tj">
                            <el-upload
                                class="fl"
                                ref="upload"
                                :action="url"
                                :on-change="handleChange"
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                :auto-upload="false">
                              <div  v-if="!workDTO.isHandin">
                                <i class="el-icon-circle-plus" style="font-size: 36px" />
                                <div class="shangchuan" >
                                  <span style="color: #000; font-size: 14px; margin-bottom: 10px">添加作业文件</span>
                                  <span>支持各类文档、图片、代码、压缩包格式</span>
                                </div>
                              </div>

                              <div v-else>
                                <i class="el-icon-circle-plus" style="font-size: 36px" />
                                <div class="shangchuan" >
                                  <span style="color: #000; font-size: 14px; margin-bottom: 10px">更新作业文件</span>
                                  <span>支持各类文档、图片、代码、压缩包格式</span>
                                </div>
                              </div>
                            </el-upload>

                        </div>

                    </div>
                  <div class="wenjian-box" v-show="workDTO.isHandin">
                    <img src="../../assets/images/file_ext_big_doc.png" style="width: 60px;height: 60px" alt="">
                   <div>

                     <span @click="downloadFile(downUrl)">
                       {{fileurl}}
                     </span>
<!--                    <el-link :href="workDTO.url" :download="url" target="_blank">-->
<!--                      {{url}}-->
<!--                    </el-link>-->
                   </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getStuWork } from '../../api/require'
export default {
  data () {
    return {
      sid: '',
      aid: '',
      workDTO: {},
      workUrl: '',
      fileList: [],
      url: '',
      fileurl: '',
      downUrl: ''
    }
  },
  methods: {
    submitUpload () {
      if (!this.fileList.length) {
        this.$message('请添加文件！')
      } else {
        this.$refs.upload.submit()
      };
      getStuWork(this.aid, this.sid).then((res) => {
        console.log(res)
        this.workDTO = res.data.obj
        if (this.workDTO.url) {
          this.fileurl = this.getFileName(this.workDTO.url)
          this.downUrl = 'http://localhost:9000/file/' + this.fileurl
        }
      }).catch(e => {
        console.log(e)
      })
    },
    handleRemove () {
      this.$axios.post('api/work/deleteWorkUrl?sId=' + this.sId + '&wId=' + this.wId)
      this.reload()
    },
    handleChange (file, fileList) {
      this.fileList = fileList.slice(-1)
    },
    beforeUpload (file) {
      // this.$axios.get('api/file/getId?sId=' + this.sId + '&wId=' + this.wId)
    },
    getFileName (workUrl) {
      const pos = workUrl.lastIndexOf('/')
      return workUrl.substring(pos + 1)
    },
    downloadFile (fileName) {
      const link = document.createElement('a')
      try {
        link.href = fileName
      } catch (error) {
        link.href = window.URL.createObjectURL(fileName)
      }
      link.click()
    }
  },
  created () {
    this.sid = this.$route.query.sid
    this.aid = this.$route.query.aid
    this.url = `http://localhost:9000/file/upload?sid=${this.sid}&aid=${this.aid}`

    getStuWork(this.aid, this.sid).then((res) => {
      console.log(res)
      this.workDTO = res.data.obj
      if (this.workDTO.url) {
        console.log(this.workDTO.url.lastIndexOf('/'))
        this.fileurl = this.getFileName(this.workDTO.url)
        this.downUrl = 'http://localhost:9000/' + this.fileurl
      }
    }).catch(e => {
      console.log(e)
    })
  }
}
</script>

<style scoped>
    a {
        text-decoration: none;
    }
    .background_color {
        background-color: #32BAF0 !important;
    }
    .handIn {
        height: 240px;
    }
    .clearfix {
        zoom: 1;
    }
    .fl {
        float: left;
    }
    .fr {
        float: right;
    }
    .mywork-page {
        padding-top: 40px;
        padding-bottom: 60px;
    }
    .cWidth-new {
        width: 1224px;
    }
    .cWidth, .cWidth-new, .gWidth {
        margin-left: auto;
        margin-right: auto;
    }
    .work-title {
        text-align: left;
    }
    .mywork-page .work-title h3 {
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 650px;
    }
    .mywork-page .work-title p {
        font-size: 12px;
        padding: 0 5px;
        line-height: 20px;
        margin-right: 10px;
        margin-bottom: 40px;
        background-color: #F1F3F4;
        color: #5F6368;
        border-radius: 2px;
        display: inline-block;
    }
    .mywork-page .work-title p span {
        margin-right: 8px;
    }

    .mywork-page .sc-tj-box {
        height: 40px;
        line-height: 40px;
    }
    .mywork-page .sc-tj-box .sc-tj {
        font-size: 0;
    }
    .mywork-page .sc-tj-box .sc-tj .tj-btn {
        width: 102px;
        background: rgba(50,186,240,.5);
        color: #fff;
    }
    .mywork-page .sc-tj-box .sc-tj a {
        display: inline-block;
        font-size: 14px;
        text-align: center;
        border-radius: 3px;
    }
    .mywork-page .sc-tj-box {
        height: 40px;
        line-height: 40px;
    }
    .mywork-page .homework-box {
        margin-top: 20px;
        border: 1px solid #E2E6ED;
        background: #FFF;
        border-radius: 8px;
    }
    .mywork-page .homework-box .work-list {
        height: auto;
    }
    .mywork-page .homework-box .work-list ul {
        padding-bottom: 25px;
    }
    .mywork-page .sc-tj-box-new {
        width: 330px;
        height: 80px;
        border: 2px dashed #CCC;
        margin: 24px 0 24px 24px
    }
    .mywork-page .sc-tj-box .sc-tj .sc-btn {
        font-size: 14px;
        margin-top: 20px;
        line-height: 26px;
        color: #1F2023;
    }
    .mywork-page .sc-tj-box-new .sc-tj i {
        margin: 22px 0 0 30px;
        float: left;
    }
    .mywork-page .sc-tj-box-new .shangchuan {
        width: 250px;
        float: left;
        text-align: left;
        margin-top: 25px;
        margin-left: 10px;
    }
    .mywork-page .sc-tj-box .sc-tj a {
        display: inline-block;
        font-size: 14px;
        text-align: center;
        border-radius: 3px;
    }
    .mywork-page .sc-tj-box-new .shangchuan span {
        color: #999;
        font-size: 12px;
        display: block;
        line-height: 12px;
    }
</style>

<style lang="scss">
  .wenjian-box{
    padding:  20px;
    width: 95%;
    height: 60px;
    background:#f7f7f7;
    border-radius: 5px;
        margin-top: 20px;
    display: flex;
    justify-content: left;
    align-items: center;
    div{
      margin: 20px;
    }
  }
    .el-upload-list__item {
        -webkit-transition: all .5s cubic-bezier(.55,0,.1,1);
        transition: all .5s cubic-bezier(.55,0,.1,1);
        font-size: 14px;
        color: #606266;
        line-height: 1.8;
        margin-top: 5px;
        position: relative;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 4px;
        width: auto;
        float: left;
    }
    .el-upload-list__item-name {
        color: #606266;
        display: block;
        overflow: hidden;
        padding-left: 4px;
        text-overflow: ellipsis;
        -webkit-transition: color .3s;
        transition: color .3s;
        white-space: nowrap;
    }
    .el-upload-list__item-name [class^=el-icon] {
        height: 100%;
        margin-right: 7px;
        color: #909399;
        font-size: 50px;
        line-height: inherit;
        display: block;
    }
</style>
